<div (mouseup)="dragup()" (mousemove)="moves($event)">
    <div class="content__title" (mouseup)="dragup()">
        <h1>
            流程图
        </h1>
    </div>
    <div class="siderLeft">
        <div style="margin-bottom: 40px;font-size: 18px;">
            流程图基本形状

        </div>

        <div draggable="true" (dragstart)="dragFromSider('start')"
             class="el_scene" #fuck>
            <svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="el_scene">
                <ellipse version="1.1" xmlns="http://www.w3.org/1999/xhtml" cx="100" cy="50" rx="70" ry="35"
                         class="outer"></ellipse>
                <ellipse version="1.1" xmlns="http://www.w3.org/1999/xhtml" cx="100" cy="50" rx="69" ry="34"
                         class="inner"></ellipse>
                <text version="1.1" xmlns="http://www.w3.org/1999/xhtml" text-anchor="middle" fill="#000" x="100" y="50"
                      dominant-baseline="central">开始
                </text>
            </svg>
        </div>
        <div draggable="true" (dragstart)="dragFromSider('scene')" class="el_scene">
            <svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="el_scene">
                <rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="30" width="140" height="70"
                      class="outer"></rect>
                <rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="31" y="1" width="138" height="68"
                      class="inner"></rect>
                <text version="1.1" xmlns="http://www.w3.org/1999/xhtml" text-anchor="middle" fill="#000"
                      x="100.10954063604242" y="35.46289752650176" dominant-baseline="central">场景
                </text>
            </svg>
        </div>
        <div draggable="true" (dragstart)="dragFromSider('logic')" class="el_start">
            <svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="el_start">
                <path version="1.1" xmlns="http://www.w3.org/1999/xhtml"
                      d="M 100.10954063604242 0 L 170.21908127208485 45.46289752650176 L 100.10954063604242 90.92579505300353 L 30 45.46289752650176 Z"
                      class="outer"></path>
                <path version="1.1" xmlns="http://www.w3.org/1999/xhtml"
                      d="M 100.10954063604242 1 L 169.21908127208485 45.46289752650176 L 100.10954063604242 89.92579505300353 L 31 45.46289752650176 Z"
                      class="inner"></path>
                <text version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#000" text-anchor="middle"
                      x="100.10954063604242" y="45.46289752650176" dominant-baseline="central">逻辑分支
                </text>
            </svg>
        </div>
        <div class="el_group" draggable="true" (dragstart)="dragFromSider('group')">
            分组
        </div>
        <!--<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="el_start" >-->
        <!--<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 100.10954063604242 0 L 200.21908127208485 66.46289752650176 L 100.10954063604242 132.92579505300353 L 0 66.46289752650176 Z" class="outer"></path>-->
        <!--<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 100.10954063604242 10 L 190.21908127208485 66.46289752650176 L 100.10954063604242 122.92579505300353 L 10 66.46289752650176 Z" class="inner"></path>-->
        <!--<text version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#fff" text-anchor="middle" x="100.10954063604242" y="66.46289752650176" dominant-baseline="central">事件回顾</text>-->
        <!--</svg>-->


    </div>
    <div class="editorPanel" oncontextmenu="return false" draggable="true" ondragstart="return false" mouseWheel

         (mousedown)="dragPanel($event)" (mousemove)="moves($event)" (mouseWheelUp)="mouseWheelUpFunc()"
         (drop)="onDragEnds($event)"
         (dragover)="mDragOver($event)"
         (mouseWheelDown)="mouseWheelDownFunc()" #panel>
        <div style="position: absolute;right: 20px;top: 20px">
            <button nz-button [nzShape]="'circle'" [nzType]="'primary'" [nzSize]="'lg'"
                    style="width: 50px;height: 50px;z-index: 999999" (click)="refresh()"><i style="font-size: 20px"
                                                                                            class="anticon anticon-sync"></i>
            </button>
        </div>


        <div class=" jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan"
             [ngStyle]="editor_panel_style"
             id="canvas" #canvas>

            <div
                *ngFor="let node of el_nodes;let i=index"
                id="{{'flowchartWindow'+i}}"

                [ngStyle]="node.style" [ngClass]="node.nodeClass"
                (dblclick)="nodeEdit(i)" >
                <div *ngIf="node.type=='group'" class="node_group"
                     style="background-color: mediumseagreen;width: 100%;height: 100%">
                    <span class="node_title">{{node.title}}</span>
                </div>
                <div *ngIf="node.type=='start'" style="width: 100%;height: 100%">
                    <svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;height: 100%">

                        <ellipse version="1.1" xmlns="http://www.w3.org/1999/xhtml" cx="50%" cy="50%" rx="49%" ry="49%"
                                 class="inner"></ellipse>
                        <text version="1.1" xmlns="http://www.w3.org/1999/xhtml" text-anchor="middle" fill="#000"
                              x="50%"
                              y="50%"
                              dominant-baseline="central">{{node.title}}
                        </text>
                    </svg>
                </div>


                <div *ngIf="node.type=='process'" style="width: 100%;height: 100%">
                    <svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;height: 100%">

                        <rect version="1.1" xmlns="http://www.w3.org/1999/xhtml"  width="100%" height="100%"
                              class="inner"></rect>
                        <text version="1.1" xmlns="http://www.w3.org/1999/xhtml" text-anchor="middle" fill="#000"
                              x="50%" y="50%" dominant-baseline="central">{{node.title}}
                        </text>
                    </svg>
                </div>
                <div *ngIf="node.type=='fork'"  style="width: 100%;height: 100%">
                    <svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;height: 100%">

                        <polygon points="0,50 100,0 200,50 100,100"
                                 class="inner"/>
                        <text version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#000" text-anchor="middle"
                              x="50%" y="50%" dominant-baseline="central">{{node.title}}
                        </text>
                    </svg>
                </div>
            </div>
            <div
                *ngFor="let node of el_groups;let i=index"
                id="{{'flowchartWindowg'+i}}"
                (resizeStart)="resizeStart()" (resizeEnd)="resizeEnd()"
                [directions]="['bottom', 'right']" ngResizable [minWidth]="100"
                [minHeight]="100"
                [ngStyle]="node.style" [ngClass]="node.nodeClass"
                (dblclick)="nodeEdit(i)" (dragleave)="groupDragLeave(i)" (dragover)="groupDragOver(i)"
                (drop)="groupAppend($event,i)"

            >
                <div *ngIf="node.type=='group'" class="node_group"
                     style="background-color: mediumseagreen;width: 100%;height: 100%">
                    <span class="node_title">{{node.title}}</span>
                </div>
            </div>



        </div>

        <nz-modal [nzStyle]="modalStyle" [nzContent]="modalContent2" [nzVisible]="isVisibleMiddle" [nzTitle]="'分组设置'"
                  (nzOnCancel)="modalClose()" [nzFooter]="''">
            <ng-template #modalContent2>

                <div *ngIf="selectedNode!=-1&&el_nodes[selectedNode].type=='group'">
                    <div nz-row [nzGutter]="8">
                        <div nz-col [nzSpan]="3">
                            <label>标题：</label>
                        </div>
                        <div nz-col [nzSpan]="21">
                            <nz-input [(ngModel)]="modalTitle" [nzPlaceHolder]="'请输入内容'"></nz-input>
                        </div>

                    </div>
                    <div nz-row [nzGutter]="8">
                        <div nz-col [nzSpan]="3">
                            <label>图片：</label>
                        </div>
                        <div nz-col [nzSpan]="21">
                            <nz-input [(ngModel)]="modalImgPath" [nzPlaceHolder]="'请输入内容'"></nz-input>
                        </div>

                    </div>
                    <div nz-row [nzGutter]="8">
                        <div nz-col [nzSpan]="3">
                            <label>分配方式：</label>
                        </div>
                        <div nz-col [nzSpan]="21">
                            <nz-select style="width: 120px;" [(ngModel)]="modalTypeSelector"
                                       [nzPlaceHolder]="'请选择分配方式'">
                                <nz-option
                                    *ngFor="let option of typeOptions"
                                    [nzLabel]="option.label"
                                    [nzValue]="option"
                                    [nzDisabled]="option.disabled">
                                </nz-option>
                            </nz-select>
                        </div>

                    </div>
                    <div nz-row [nzGutter]="8" *ngIf="modalTypeSelector!='remain'">
                        <div nz-col [nzSpan]="3">
                            <label>人数：</label>
                        </div>
                        <div nz-col [nzSpan]="21">
                            <nz-input-number [nzMin]="0" [nzMax]="999" [nzStep]="1"></nz-input-number>
                            <label *ngIf="modalTypeSelector=='percent'">%</label>
                        </div>

                    </div>
                    <div nz-row [nzGutter]="8" style="margin-top:20px;border-top: 1px solid #eee;padding-top: 20px">
                        <button nz-button [nzType]="'primary'" style="float: right">保存修改</button>
                        <button nz-button [nzType]="'danger'" style="float: right;margin-right: 20px">删除</button>
                        <button nz-button style="float: left">编辑场景</button>

                    </div>
                </div>
            </ng-template>
        </nz-modal>
    </div>

</div>

